<template>
	<div class="top flexc">
    <div style="background: rgb(255, 255, 255); border-radius: 25px; height: 50px; padding: 6px 12px 6px 6px; margin-right: 30px;">
      <div class="flexbc">
        <div class="flex">
          <div style="margin-right: 5px;"><img  src="../../static/img/tongzhi.png" style=" width: 38px; height: 38px; border-radius: 19px;"/></div>
          <div>
            <div style=" font-size: 14px;color: #020C1D;">消息通知</div>
            <div style=" font-size: 12px;color:#787D85;">未读:<span style="color: #FF0000;  margin: 0 10px;">{{count}}</span></div>
          </div>
        </div>
        <div @click="joinchatlist2" class="t_join_chatlist">查看</div>
      </div>
    </div>
    <div style="background: rgb(255, 255, 255); border-radius: 25px; height: 50px; padding: 6px 12px 6px 6px; width: 180px;">
      <div class="flexbc">

        <div class="flex">
          <div style="margin-right: 5px;"><img  src="../../static/img/toux.png" style=" width: 38px; height: 38px; border-radius: 19px;"/></div>
          <div>
            <div style=" font-size: 14px;color: rgb(120, 125, 133);">{{user.name}}</div>
            <div style=" font-size: 12px;color: rgb(120, 125, 133);">店主</div>
          </div>
        </div>
        <div>
          <el-dropdown @command="handleCommand" trigger="click" >
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <el-dialog title="通知详情" :visible.sync="log2" :close-on-click-modal="false" :close-on-press-escape="false" width="800px" :modal-append-to-body="false">
      <div>
        <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">通知标题:</span>{{now.title}}</div>
        <div style="margin-bottom: 20px;" v-html="now.content"></div>
        <div style="margin-bottom: 20px;" class="flexc" v-if="now.annex"><span style="font-weight: bold; margin-right: 10px;">附件:</span>
          <div @click="xiazai(now.annex)" style="color: rgb(0, 90, 255); cursor: pointer; margin-right: 20px;">下载</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="flexc" style="justify-content: end;">
          <div style="margin-right: 20px;">1/{{list.length}}</div>
          <el-button type="primary" @click="xiangqing">已读</el-button>
          <el-button type="primary" v-if="list.length > 1" @click="xiangqing(2)">全部已读</el-button>
        </div>


<!--        <div style="margin-right: 20px;">1/{{tongzhi.length}}</div>
        <el-button type="primary" @click="yidu(1)">已读</el-button>
        <el-button type="primary" v-if="tongzhi.length > 1" @click="yidu(2)">全部已读</el-button> -->
      </span>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'top',
		data() {
			return {
        user:"",
        icp:"",
        count:0,
        list:[],
        now:"",
        log2:false
			}
		},
		created() {
      this.icp = localStorage.getItem('icp')
      this.getxiaoxi()
		},
		mounted() {
      if(localStorage.getItem('user')){
        this.user = JSON.parse(localStorage.getItem('user'))
      }
      axios.get('/agent/message/count').then((response)=>{
      	if (response.data.msg.code == 0) {
          console.log(response.data.data)
      		this.count = response.data.data.not_read_count
      	} else {
      		this.$message.error(response.data.msg.info);
      	}
      })
		},
		methods: {
      xiangqing:function(item){
        if(item == 2){

          axios.get('/agent/message/read/all').then((response)=>{
          	if (response.data.msg.code == 0) {
              this.log2 = false
              this.getxiaoxi()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }else{
          axios.get('/agent/message/read?id='+this.now.id).then((response)=>{
          	if (response.data.msg.code == 0) {
              this.getxiaoxi()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }


      },
      xiazai:function(url){
        window.location.href = url  + '?attname='
      },
      getxiaoxi:function(){
        axios.get('/agent/message/list?is_read=1').then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.data.length > 0){
              this.list = response.data.data.data
              this.now = response.data.data.data[0]
              if(this.now.is_eject == 1){
                this.log2 = true
              }
              
            }else{
              this.log2 = false
              this.count = 0
            }
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      joinchatlist2:function(){
        this.$router.push({path:'/tongzhi/tongzhixitong'})
      },
      handleCommand:function(e){
        if(e == 'a'){
          axios.post('/agent/auth/logout').then((response)=>{
          	if (response.data.msg.code == 0) {
          		this.$router.push('/login')
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }
      }
		}
	}
</script>


<style scoped>

  /deep/ .el-radio{ display: block; margin-bottom: 20px;}
  .t_join_chatlist{
    background-color: #E0F8E2;
    font-size: 13px;
    color: #0E9D0E;
    width: 75px;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;
    margin-left: 10px;
    cursor: pointer;
  }
</style>
